<!--
 * @Author: GL
 * @Date: 2022-09-23 13:57:40
 * @LastEditors: GL
 * @LastEditTime: 2023-04-03 21:56:54
 * @Description: 产品发布
-->
<template>
  <div id="map"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    var chartDom = document.getElementById("map");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "产品类别统计",
        subtext: "数量",
        top: 10,
        left: 10,
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        type: "scroll",
        bottom: 10,
        data: (function () {
          var list = [];
          for (var i = 1; i <= 28; i++) {
            list.push(i + 2000 + "");
          }
          return list;
        })(),
      },
      visualMap: {
        top: "middle",
        right: 10,
        color: ["red", "yellow"],
        calculable: true,
      },
      radar: {
        indicator: [
          { text: "水果", max: 400 },
          { text: "种子", max: 400 },
          { text: "蔬菜", max: 400 },
          { text: "生鲜", max: 400 },
          { text: "其他", max: 400 },
        ],
      },
      series: (function () {
        var series = [];
        for (var i = 1; i <= 28; i++) {
          series.push({
            type: "radar",
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            emphasis: {
              areaStyle: {
                color: "rgba(0,250,0,0.3)",
              },
            },
            data: [
              {
                value: [
                  (40 - i) * 10,
                  (38 - i) * 4 + 60,
                  i * 5 + 10,
                  i * 9,
                  (i * i) / 2,
                ],
                name: i + 2000 + "",
              },
            ],
          });
        }
        return series;
      })(),
    };

    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
#map {
  height: 100%;
  text-align: center;
}
</style>